<template>
	<view class='koiNodePro'>
		<navBar><template #title>锦鲤合伙人</template></navBar>
		<view class="secureCase">
			<view class="container">
				<view class="period">
					<text>第{{item.id}}期</text>
				</view>
				<view class="topText">
					{{item.isIssue}}
				</view>
				<view class="Quest">
					<view class="center">
						<view class="left">
							<view class="first">
								<text>当前流水</text>
								<view>145533234USDT</view>
							</view>
							<view class="last">
								<text>预计收益</text>
								<view>145533234USDT</view>
							</view>
						</view>
						<view class="right">
							<view class="first">
								<text>20台</text>
							</view>
							<view class="last">
								<text>完成销售任务></text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>销售业绩：12453058USDT(70%奖励)</view>
						<view>流水分红：124558USDT(1.5%奖励)</view>
						<view>预计发放：12月13日00:00</view>
					</view>
				</view>
				<view class="schedule">
					<van-progress :percentage="item.progress" :show-pivot='false' stroke-width='4px' />
				</view>
			</view>
			<view class="NoticeBar">
				<van-notice-bar class="NoticeText" left-icon="info-o"
					:text="item.isIssue==='进行中'?'预计收益会在本次奖励发放前持续跟着您的收益来源增长':'本期已结束，奖励已经发放至您的账户'" />
			</view>
			<view class="SourceIncome">
				<view class='title'>收益来源</view>
				<van-tabs v-model:active="active" title-inactive-color="rgba(255, 255, 255, 1)" line-width="0"
					background="#121317">
					<van-tab>
						<template #title>销售业绩</template>
						<view class="content">
							<view class="title">
								<view class='phone'>用户</view>
								<view class='createDate'>购买时间</view>
								<view class='num'>台数</view>
							</view>
							<view class='date'>
								<view class='box' v-for="(item,index) in list" :key='index'>
									<view class="phone">
										{{item.phone}}
									</view>
									<view class="createDate">
										{{item.createDate}}
									</view>
									<view class="num">
										{{item.num}}
									</view>
								</view>
							</view>
						</view>
					</van-tab>
					<van-tab>
						<template #title>流水分红</template>
						<view class="content">
							<view class="title">
								<view class='phone'>用户</view>
								<view class='num'>提供分红</view>
							</view>
							<view class='date'>
								<view class='box' v-for="(item,index) in list" :key='index'>
									<view class="phone">
										{{item.phone}}
									</view>
									<view class="num">
										{{item.num}}
									</view>
								</view>
							</view>
						</view>
					</van-tab>
				</van-tabs>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import navBar from '@/components/mine/navBar/index.vue'
	const item = ref({})
	const active = ref(0)
	const list = ref([
		{
			phone: '175****3171',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '155****3572',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '131****3512',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '155****3572',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '175****3171',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '155****3572',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '131****3512',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '155****3572',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		}, {
			phone: '131****3512',
			createDate: '2023年10月10日 21:19:28',
			num: '10台'
		},
	])

	onLoad((params) => {
		item.value = JSON.parse(params.item)
	})
</script>

<style lang="scss" scoped>
	.koiNodePro {
		.container {
			position: relative;
			height: 426px;
			margin-bottom: 38px;
			padding: 20px;
			box-sizing: border-box;
			background: url('/static/images/Home/card-gold.png') no-repeat;
			background-size: 100% 100%;
			color: white;
			border-radius: 50px;
			box-shadow: 0px 8px 8px white;
			overflow: hidden;

			.Quest {
				margin-top: 134px;

				.center {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {

						.first,
						.last {
							display: flex;
							align-items: center;
							font-size: 40px;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #CDC0B0;
							line-height: 56px;

							uni-text {
								margin-right: 4px;
								font-size: 24px;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #CDC0B0;
							}
						}
					}

					.right {
						text-align: center;

						.first {
							font-size: 40px;
						}
					}
				}

				.bottom {
					margin-top: 20px;

					uni-view {
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #947A52;
						line-height: 33px;
					}
				}
			}

			// 进行中状态
			.topText {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 1px;
				right: 0;
				width: 140px;
				height: 48px;
				background: linear-gradient(90deg, #14D081 0%, rgba(20, 208, 129, 0) 100%);
				border-radius: 0px 32px 0px 32px;
				font-size: 22px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
			}

			.period {
				position: absolute;
				left: 254px;
				top: 56px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 112px;
				height: 36px;
				background: linear-gradient(180deg, #000000 0%, #000000 100%);
				border-radius: 4px;
				border: 1px solid;
				font-size: 24px;
				font-family: MicrosoftYaHei;
				color: #CDC0B0;
			}

			.center {
				margin-top: 40px;
				color: rgba(205, 192, 176, 1);
				font-size: 24px;

				.date {
					color: rgba(148, 122, 82, 1);
				}
			}

			.schedule {
				position: absolute;
				right: 5%;
				bottom: 52px;
				width: 46%;

				::v-deep.van-progress__portion {
					background: linear-gradient(90deg, #D7D0BB 0%, #FFF9EF 28%, #FFF9EF 34%, #FFD18A 100%);
				}
			}
		}

		.NoticeText {
			height: 64px;
			background: linear-gradient(90deg, rgba(42, 43, 46, 1) 0%, rgba(0, 0, 0, 0) 100%);
			border-radius: 32px;
			font-size: 22px;
			color: #b7b8b9;
			font-weight: 400;
			font-family: PingFangSC, PingFang SC;
			--van-notice-bar-icon-size: 24px;

			::v-deep.van-icon {
				background: linear-gradient(90deg, rgba(42, 43, 46, 0) 0%, rgba(37, 60, 60, 1) 100%);
				width: 64px;
				height: 64px;
				border-radius: 50%;
				display: flex;
				color: #02c7b2;
				font-size: 26px;
				align-items: center;
				justify-content: center;
				left: -16px;
			}
		}
	}

	.SourceIncome {
		position: relative;
		margin-top: 30px;
		padding: 40px;
		background: rgba(42, 43, 46, 1);
		box-boxsize: border-box;
		border-radius: 32px;

		.title {
			font-size: 36px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 50px;
			letter-spacing: 1px;
		}

		::v-deep.van-tabs__line {
			background-color: transparent;
		}

		::v-deep.van-tabs__nav.van-tabs__nav--line {
			width: 344px !important;
			margin: 0 auto;
			height: 64px;
		}

		::v-deep span.van-tab__text {
			font-size: 24px;
			height: 64px;
			line-height: 64px;
		}

		::v-deep .van-tab__text--ellipsis {
			overflow: visible;
			-webkit-line-clamp: 1;
			-webkit-box-orient: horizontal !important;
			box-orient: horizontal !important;
		}

		::v-deep.van-tab {
			width: 100px;
		}

		::v-deep.van-tabs__wrap {
			height: 88px;
		}

		::v-deep.van-tabs--line .van-tabs__wrap {
			height: auto;
		}

		// tabs切换样式
		::v-deep.van-tabs__nav.van-tabs__nav--line {
			border: 1px solid #707173;
			border-radius: 50px;
			padding: 0;
			width: 360px;
			font-size: 24px;
		}

		::v-deep.van-tab--active {
			background: white;
			border: 1px solid #fff;
			border-radius: 50px;
			color: black;
		}

		::v-deep.van-tabs {
			.van-tabs__wrap {
				position: absolute;
				right: 0;
				top: -60px;
			}

			.van-tabs__content {
				position: relative;
				top: 32px;
				width: 100%;
				font-size: 24px;
				color: #fff;

				.content {
					.title {
						font-size: 26px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.phone,
						.createDate,
						.num {
							text-align: center;
						}

						.createDate {
							margin-left: 84px;
						}

						.phone {
							text-align: left;
						}

						.num {
							text-align: right;
						}
					}

					.date {
						.box {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							margin: 20px 0;
							margin-bottom: 40px;

							&:last-child {
								margin-bottom: 20px;
							}

							.phone,
							.createDate,
							.num {
								// width: 33%;
								text-align: center;
							}

							.createDate {
								width: 50%;
								color: rgba(127, 127, 129, 1);
							}

							.phone {
								text-align: left;
							}

							.num {
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
</style>